<!--批量导入课程步骤一-->
<template>
    <a-row>
        <div class="page_title">批量导入</div>
        <div class="show_content">
          <a-steps :current="courseGroupState.current" :style="{marginLeft:'-32%'}">
              <a-step>
                  <template slot="title">
                      步骤一
                  </template>
                  <span slot="description">上传Excel表格文件</span>
              </a-step>
              <a-step title="步骤二" description="检查Excel表格识别结果确认导入" />
          </a-steps>
          <div style="display: flex;justify-content: flex-end;width: 100%;">
              <a-button type="primary" class="button_one" @click="backPre">
                  返回上一步
              </a-button>
              <a-button type="primary" class="button_one" @click="importCourse">
                  确认导入
              </a-button>
          </div>
          <div style="margin: 1em auto; width: 100%; position: relative;min-height: 25em;">
              <a-table :data-source="courseGroupState.courseGroupRecord" :pagination="pagination" :rowKey="(record) => {return record.simpleCourseGroupInfo.courseGroupId}" >
                  <a-table-column width="15%" title="所属课程" data-index="simpleCourseGroupInfo.course" />
                  <a-table-column width="15%" title="开课时间" data-index="simpleCourseGroupInfo.time" />
                  <a-table-column width="15%" title="开课老师" data-index="teacherName" />
                  <a-table-column width="15%" title="上课班级" data-index="simpleCourseGroupInfo.classes" />
                  <a-table-column width="15%" key="courseId" title="操作">
                      <template slot-scope="record">
                          <span>
                                <a-popconfirm
                                        title="确认删除改课程么?"
                                        @confirm="() => deleteCourse(record.simpleCourseGroupInfo.courseGroupId)"
                                >
                                    <a href="javascript:;">删除</a>
                                </a-popconfirm>
                            <a-divider type="vertical" />
                            <a @click="showAlert(record)">编辑</a>
                          </span>
                      </template>
                  </a-table-column>
              </a-table>
          </div>
        </div>
<!--        编辑弹窗-->
      <a-row>
        <a-modal
            v-model="modalVisible"
            title="编辑课程组信息"
            centered
            @ok="editCourseGroup"
        >
          <a-row  style="text-align: left;">
            <a-col >
              <a-descriptions style="width: 100%;text-align: left">
                <a-descriptions-item label="课程组名">
                  <a-input placeholder="课程组名"  v-model="courseGroupRecord.name"/>
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions style="width: 100%;text-align: left">
                <a-descriptions-item label="所属课程">
                  <a-select
                      label-in-value
                      style="width: 120px"
                      v-model="choose.course"
                  >
                    <a-select-option v-for="(item,index) in courseGroupState.courseInfo.courseGroups" :key="index" :value="item">{{item}}</a-select-option>
                  </a-select>
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col >
              <a-descriptions style="width: 100%;text-align: left">
                <a-descriptions-item label="开课时间">
                  <a-select
                      label-in-value
                      v-model="choose.time"
                      style="width: 100%;"
                  >
                    <a-select-option v-for="(item,index) in courseGroupState.courseInfo.courseGroupTimes" :key="index" :value="item">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions style="width: 100%;text-align: left;">
                <a-descriptions-item label="课程组长">
                  <a-select
                      label-in-value
                      style="width: 100%;"
                      v-model="choose.leader"
                  >
                    <a-select-option v-for="(item,index) in courseGroupState.courseInfo.courseGroupLeader" :key="index" :value="item.id">{{item.name}}</a-select-option>
                  </a-select>
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col>上课老师：</a-col>
            <a-col>
              <a-select
                  mode="multiple"
                  style="width: 100%"
                  placeholder="选择上课老师"
                  v-model="choose.teacher"
              >
                <a-select-option v-for="(item,index) in courseGroupState.courseInfo.courseGroupTeacher" :key="index" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-col>
            <a-col>开课班级：</a-col>
            <a-col>
              <a-select
                  mode="multiple"
                  style="width: 100%"
                  placeholder="选择开课班级"
                  v-model="courseGroupRecord.simpleCourseGroupInfo.classes"
              >
                <a-select-option v-for="(item,index) in courseGroupState.courseInfo.courseGroupClass" :key="index" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-modal>
      </a-row>
    </a-row>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "BatchImportOne",
        data() {
            return {
                pagination: {}, // 配置分页配置
                courseGroupRecord: {
                    simpleCourseGroupInfo:{
                      courseGroupId: '',
                      course: "",
                      time: "",
                      teacher: [],
                      classes: [],
                    },
                    name: '',
                    leader: '',
                }, // 存储当前编辑的课程信息
                choose: {
                  course: {},
                  time: {},
                  leader: {},
                  teacher: []
                },
                modalVisible: false, // 是否显示编辑页面
            }
        },
        methods: {
            backPre(){ // 回到上一步
              this.$store.commit("user/SET_CURRENT_STEP",0)
            },
            importCourse(){ //确认导入课程信息
                this.$store.dispatch('courseGroup/courseGroupImport', this.accessState.token)
                .then(() => {
                    this.$message.success("导入成功");
                })
                .catch((error) => {
                    this.$message.error("未知错误" + error.msg);
                })
            },
            deleteCourse(courseGroupId){ // 删除表格中课程的信息
                this.$store.dispatch('courseGroup/courseGroupDelete', {courseGroupId: courseGroupId})
                    .then(() => { this.$message.success('删除成功'); this.initData(); })
                    .catch(()=> { this.$message.success('删除失败') })
            },
            editCourseGroup(){ // 编辑修改表格中的课程信息
              // 因为编辑框里面的对象和课程组对象的内容是不一样的，所以这里我们需要手动转义
              this.courseGroupRecord.simpleCourseGroupInfo.course = this.choose.course.key
              this.courseGroupRecord.simpleCourseGroupInfo.time = this.choose.time.key
              this.courseGroupRecord.leader = {id:this.choose.leader.key,name:this.choose.leader.label}
              this.courseGroupRecord.simpleCourseGroupInfo.teacher = []
              // 老师信息是一个数组对象，所以需要遍历获取
              let list = []
              for (let i=0;i< this.courseGroupState.courseInfo.courseGroupTeacher.length ; i++){
                for (let j=0;j<this.choose.teacher.length;j++){
                  if(this.choose.teacher[j]===this.courseGroupState.courseInfo.courseGroupTeacher[i].id){
                    this.courseGroupRecord.simpleCourseGroupInfo.teacher.push(this.courseGroupState.courseInfo.courseGroupTeacher[i])
                    // 为了显示方便，我们把老师的名字单独提取出来
                    list.push(this.courseGroupState.courseInfo.courseGroupTeacher[i].name)
                  }
                }
              }
              this.courseGroupRecord.teacherName = list.join(',')
              // 调用action进行数据更新
              if(this.courseGroupRecord.name === ""){
                this.$message.error("课程组名不能为空")
              } else {
                this.$store.dispatch('courseGroup/courseGroupModify', this.courseGroupRecord)
                this.modalVisible = false
              }
            },
            initData(){ // 初始化分页器配置
                this.pagination = {
                    size: "small",
                    total: this.courseGroupState.courseGroupRecord.length,
                    showTotal: total => `共 ${total} 条`,
                    pageSizeOptions: ['5', '6', '7', '8', '9', '10'],
                    defaultPageSize: 5,
                    showSizeChanger: true,
                    showQuickJumper: true
                }
            },
            // 显示编辑框
            showAlert(record){
              this.modalVisible = true;
              // 获取当前选中的内容
              this.courseGroupRecord = JSON.parse(JSON.stringify(record));
              // 初始化编辑器显示的内容
              this.choose = {
                course: {},
                time: {},
                leader: {},
                teacher: []
              }
              // 对各个内容进行转换，方便显示
              this.choose.course = {key:record.simpleCourseGroupInfo.course, label:record.simpleCourseGroupInfo.course}
              this.choose.time = {key:record.simpleCourseGroupInfo.time, label:record.simpleCourseGroupInfo.time}
              this.choose.leader = {key:record.leader.id, label:record.leader.name}
              for (let i=0;i<record.simpleCourseGroupInfo.teacher.length;i++) {
                this.choose.teacher.push(record.simpleCourseGroupInfo.teacher[i].id)
              }
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'courseGroupState': 'courseGroup', // 获取store
                'accessState': 'access'
            })
        },
        created() {
            this.initData(); //数据初始化
            this.$store.dispatch('courseGroup/getCourseGroupInfo', null)
        }
    }
</script>

<style scoped>
    .show_content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 4em;
    }
    .page_title{
        font-weight: bolder;
        font-size: 1.5em;
        position: relative;
        text-align: left;
    }
    .button_one{
        padding: 1em 2em;
        line-height: 0;
        font-size: 1em;
        width: 12em;
        margin: 1em;
        background: #3399ff;
    }
    #components-pagination-demo-mini .ant-pagination:not(:last-child) {
        margin-bottom: 24px;
    }

</style>
